// import Icon from "@/components/icon"
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
import * as Yup from 'yup'
import { useFormik } from 'formik'

type FormValues = {
    mobile: string
    code: string
}
export default function Login() {
    const formik = useFormik({
        initialValues: {
            mobile: '13911111111',
            code: '123456',
        },
        onSubmit: (values) => {
            console.log(values)
        },
        // validate(values) {
        //     // 添加 TS 格式断言
        //     const errors = {} as FormValues
        //     if (!/^1[3-9]\d{9}$/.test(values.mobile)) {
        //         errors.mobile = '手机号格式错误'
        //     }
        //     if (!/^\d{6}$/.test(values.code)) {
        //         errors.code = '验证码格式错误'
        //     }
        //     return errors
        // },
        // Yup 表单校验
        validationSchema: Yup.object().shape({
            // 手机号校验
            mobile: Yup.string().required('必填项').matches(/^1[3-9]\d{9}$/, '手机号格式错误'),
            // 验证码校验
            code: Yup.string().required('必填项').matches(/^\d{6}$/, '验证码格式错误'),
        }),
    })
    return (
        <div className={styles.root}>
            <NavBar>登录</NavBar>
            <div className='content'>
                {/* 标题 */}
                <h3>短信登录</h3>
                <form onSubmit={formik.handleSubmit}></form>
                <form>
                    {/* 手机号输入框 */}
                    <div className='input-item'>
                        <div className='input-box'>
                            <input
                                autoFocus
                                className='input'
                                placeholder='请输入手机号'
                                autoComplete='off'
                                type='text'
                                name='mobile'
                                maxLength={11}
                                errorMsg={formik.touched.mobile ? formik.errors.mobile : ''}
                                onBlur={formik.handleBlur}
                                value={formik.values.mobile}
                                onChange={formik.handleChange}
                            />
                            <div className='validate'>手机号格式错误</div>
                        </div>
                    </div>

                    {/* 短信验证码输入框 */}
                    <div className='input-item'>
                        <div className='input-box'>
                            <input
                                className='input'
                                placeholder='请输入验证码'
                                autoComplete='off'
                                type='text'
                                name='code'
                                maxLength={6}
                                errorMsg={formik.touched.code ? formik.errors.code : ''}
                                onBlur={formik.handleBlur}
                                extra={<span>获取验证码</span>}
                                value={formik.values.code}
                                onChange={formik.handleChange}
                            />
                            {/* <div className='validate'>验证码格式错误</div>
                            <div className='extra'>获取验证码</div> */}

                        </div>
                    </div>

                    {/* 登录按钮 */}
                    <button type='submit' className='login-btn' disabled={!formik.isValid}>
                        登录
                    </button>
                </form>
            </div>
        </div>
    )
}